<template>
	<view class="batchBox">
		<u-popup mode="center" v-model="visible" :closeable="true">
			<view class="tableContent">
				<view class="tit">批量修改库存（-1表示无限库存）</view>
				<view class="table">
					<view class="tr">
						<view class="td">商品名称</view>
						<view class="td">已售数量</view>
						<view class="td">库存数量</view>
					</view>
					<view class="tr" v-for="(item,index) in dataList" :key="index">
						<view class="td">{{item.tradeName}}</view>
						<view class="td">{{item.soldCount}}</view>
						<view class="td">
							<u-input v-model="item.limitBuy" :clearable="false" />
						</view>
					</view>
				</view>
				<view class="commenButton" @click="submit">确认</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		batchChangeLimitBuy
	} from '@/utils/req/api.js'
	export default {
		props: ['data', 'show'],
		data() {
			return {
				visible: false,
				dataList: []
			}
		},
		methods: {
			//批量修改库存
			async submit() {
				let flag = false;
				for (let i = 0; i < this.dataList.length; i++) {
					let {
						limitBuy,
						tradeName
					} = this.dataList[i];

					if (!limitBuy) {
						this.$showToast.call(this, `${tradeName}的限购不能为空`, 'warning');
						flag=true;
						return;
					}
					console.log(limitBuy)
					if (limitBuy && isNaN(Number(limitBuy))) {
						this.$showToast.call(this, `${tradeName}的限购请输入数字`, 'warning');
						flag=true;
						return;
					}
					if (limitBuy && String(limitBuy).split('.').length != 1) {
						this.$showToast.call(this, `${tradeName}的限购只能为整数`, 'warning');
						flag=true;
						return;
					}
					if (limitBuy < -1) {
						this.$showToast.call(this, `${tradeName}的限购不能小于-1`, 'warning');
						flag=true;
						return;
					}
				}
				if(flag){
					return;
				}
				let res = await batchChangeLimitBuy(this.dataList);
				console.log('res', res);
				if (res.data.success) {
					this.$emit('showToast', '修改成功', 'success');
					this.visible = false;
					this.$emit('clearData');
				} else {
					this.$emit('showToast', res.data.message, 'warning');
				}
			}
		},
		watch: {
			show(newVal) {
				if (newVal) {
					this.visible = newVal;
					this.dataList = JSON.parse(JSON.stringify(this.data))
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.$emit('hidden')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tableContent {
		padding: 0 20rpx;
		margin: 80rpx 0 0 0;
		max-height: 80vh;
		min-height: 30vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-bottom: 80rpx;

		.tit {
			font-size: 28rpx;
			font-weight: bold;
			line-height: 2;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.table {
			.tr {
				@include flex();
				border: 1px solid #eee;
				border-bottom: 0;

				&:last-child {
					border-bottom: 1px solid #eee;
				}

				&:nth-child(1) {
					td {
						font-size: 28rpx;
					}
				}

				.td {
					font-size: 24rpx;
					line-height: 2;
					text-align: center;
					padding: 10rpx 10rpx;

					&:nth-child(1) {
						width: 50%;
						// text-align: left;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					&:nth-child(2) {
						width: 25%;
					}

					&:nth-child(3) {
						width: 25%;
					}

					/deep/uni-input {
						border: 1px solid #eee;
						line-height: 1.5 !important;
						font-size: 28rpx;
						height: auto !important;
						text-align: center !important;
						border-radius: 10rpx;
					}

					.u-input {
						width: 80% !important;
						margin: 0 auto;
					}
				}
			}
		}


		.commenButton {
			margin-top: 40rpx;
		}
	}
</style>

<style lang="scss">
	td {
		/deep/uni-input {
			line-height: 1.5 !important;
			height: 32rpx !important;
		}
	}
</style>
